// Separator - 分隔线

.e-separator {
    height: 0;
    margin: 20px 0;
    border-bottom: 1px solid e-base-color(grey, 2);

    &.e-separator--dashed {
        border-bottom: 1px dashed e-base-color(grey, 2);
    }

    &.e-separator--border-2x {
        border-bottom-width: 2px; 
    }

    // 没边框
    &.e-separator--no-borer {
        border-bottom: 0; 
    }

    // 尺寸
    &.e-separator--sm {
        margin: .5rem 0;
    }

    &.e-separator--md {
        margin: 2rem 0;
    }

    &.e-separator--lg {
        margin: 2.5rem 0;
    }

    &.e-separator--divider {
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 0;

        > span {
            &:first-child {
                width: 100%;
                height: 1px;
                flex: 1;
                background: #ebecf1;
                display: inline-block;
            }

            &:last-child {
                width: 100%;
                height: 1px;
                flex: 1;
                background: #ebecf1;
                display: inline-block;
            }

            &:not(:first-child):not(:last-child) {
                padding: 0 2rem;
            }
        }
    }

    // 状态
    @each $name, $color in $e-state-colors {
        &.e-separator--#{$name} {
            border-color: e-get($color, base);

            &.e-separator--dashed {
                border-color: e-get($color, base);
            }
        }
    }
}
